<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.v-for都可以遍历什么</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 遍历数组 -->
			<h4>遍历数组</h4>
			<ul>
				<li v-for="(item,index) in arr" :key="index"> {{item}} </li>
			</ul>

			<!-- 遍历对象 -->
			<h4>遍历对象</h4>
			<ul>
				<li v-for="(value,key,index) in car" :key="index"> 
					{{value}} - {{key}} - {{index}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h4>遍历字符串</h4>
			<ul>
				<li v-for="(char,index) in str" :key="index"> 
					{{char}} - {{index}} 
				</li>
			</ul>

			<!-- 遍历指定次数 -->
			<h4>遍历指定次数</h4>
			<ul>
				<li v-for="(number,index) in 10" :key="index"> 
				 {{number}} - {{index}}
				</li>
			</ul>

			<hr>
			<!-- v-for很健壮，遍历如下内容都不会报错 -->
			<h1 v-for="(a,b) in null">哈哈,{{a}},{{b}}</h1>
			<h1 v-for="(a,b) in undefined">哈哈,{{a}},{{b}}</h1>
			<h1 v-for="(a,b) in '' ">哈哈,{{a}},{{b}}</h1>
			<h1 v-for="(a,b) in true ">哈哈,{{a}},{{b}}</h1>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					arr:['吃饭','睡觉','谈恋爱'],
					car:{
						name:'保时捷',
						price:'199W',
						color:'黑色'
					},
					str:'hello,atguigu',
				}
			})
		</script>
	</body>
</html>